import Taro from "@tarojs/taro";
import { Text, View } from "@tarojs/components";
import { HeaderType } from "../../constants";
import PropTypes from 'prop-types'
import './index.scss'

/**
 * 全局 头部组件
 * @author zeng
 * @date   2019/10/13 17:40
 */
export default function GHeader (props) {
  const { title, type, rootStyle, onRollback } = props
  const _title = decodeURIComponent(title || '')
  let children = null
  switch (type) {
    case HeaderType.SINGLE: {
      children = (
        <View className='header__main flex-row header__single'>
          <Text className='iconfont icon-guanbi' />
        </View>
      )
      break
    }
    case HeaderType.PAGE: {
      children = (
        <View className='header__main flex-row header__page plr20'>
          <View className='header-left flex-row pr20' style={{ backgroundColor: "transparent" }} onClick={onRollback}>
            <Text className='iconfont icon-iconfont-right' />
          </View>
          {
            _title && <Text className='header__page-label'>{_title}</Text>
          }
          {props.children}
        </View>
      )
      break
    }
    default: {
      children = (
        <View className='header__main flex-row flex-center'>
          <Text className='header__label'>{_title}</Text>
        </View>
      )
    }
  }
  return (
    <View className='header plr-30 flex-row'
          style={rootStyle}
    >
      {children}
    </View>
  )
}
GHeader.options = {
  addGlobalClass: true
}
GHeader.defaultProps = {
  rootStyle: {},
  onRollback: () => {
    Taro.navigateBack({
      fail: () => {
        Taro.switchTab({ url: '/pages/index/index' })
      }
    })
  },
}
GHeader.propTypes = {
  rootStyle: PropTypes.object, // 根节点样式
  onRollback: PropTypes.func, // 回退事件
  type: PropTypes.oneOf([HeaderType.PAGE, HeaderType.SINGLE, HeaderType.NORMAL]), // 标题类型
}
